﻿
<!--
https://github.com/netnr
https://gitee.com/netnr
https://www.netnr.com
https://zme.ink
-->


<!DOCTYPE html>
<html>
<head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel='shortcut icon' href='/favicon.ico' type='image/x-icon' />


    <title>文本对比 脚本服务</title>

    <meta name="keywords" content="netnr NET牛人 文本对比" />
    <meta name="description" content="Script Services Monaco Editor 文件对比" />

</head>
<body>
<link href='https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css' rel='stylesheet' />
<link href='https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css' rel='stylesheet' />
<script src='https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/jzjs@2.0.2/2.0.2/jz.min.js'></script>
<link href='https://cdn.jsdelivr.net/gh/netnr/cdn/libs/netnr-nav/1.1.2/netnrnav.css' rel='stylesheet' />
<script src='https://cdn.jsdelivr.net/gh/netnr/cdn/libs/netnr-nav/1.1.2/netnrnav.js' defer async></script>
        <link href="/css/global.css?v=NAI_hOr6ZSg5NjaPo94olMdf7kAXXyp9gYOiuK69lLE" rel="stylesheet" />
        <script src="/js/global.js?v=-UUx_lkaONxBXMxYH5RB2QtqMLBOuqV077SxjKI08E4"></script>
            <!--导航-->
            <button type="button" class="MenuToggle show-in-mobile btn btn-lg btn-warning ml-3 mt-3">
                <span class="fa fa-align-justify"></span>
            </button>
            <div class="netnrnav horizontal">
                <div class="netnrnav-wrapper">
                    <ul>
                        <li><a href="https://www.netnr.com" class="siteIcon"><img src="/favicon.ico" /> 首页</a></li>
                        <li><a href="https://www.netnr.com/gist/discover" title="代码片段"><span class="fa fa-fw fa-file-code-o"></span> Gist</a></li>
                        <li><a href="https://www.netnr.com/run/discover" title="在线运行代码"><span class="fa fa-fw fa-play"></span> Run</a></li>
                        <li><a href="https://www.netnr.com/doc" title="文档管理"><span class="fa fa-fw fa-book"></span> Doc</a></li>
                        <li><a href="https://www.netnr.com/draw/discover" title="绘制"><span class="fa fa-fw fa-paint-brush"></span> Draw</a></li>
                        <li><a href="/" title="ss.js.org"><span class="fa fa-fw fa-wrench"></span> 服务</a></li>
                        <li style="background-image: radial-gradient(ellipse, white, rgb(227, 248, 240))">
                            <!--标题-->
                                <a href='javascript:location.reload(false)' title="Monaco Editor 文件对比">
                                    <svg class="titleicon"><use xlink:href="#diff"></use></svg> &#x6587;&#x672C;&#x5BF9;&#x6BD4;
                                </a>
                        </li>
                        <li>
                            <a class="text-muted"><span class="fa fa-fw fa-ellipsis-h"></span></a>
                            <ul>
                                <li><a target="_blank" title="码云" href="https://gitee.com/netnr"><i class="fa fa-fw fa-git"></i> Gitee <sup><i class="fa small fa-external-link"></i></sup></a></li>
                                <li><a target="_blank" title="GitHub" href="https://github.com/netnr"><i class="fa fa-fw fa-github"></i> GitHub <sup><i class="fa small fa-external-link"></i></sup></a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        <div class="min300 mt-3">
            <style>
    .difftxt {
        width: auto;
        padding: 6px;
        height: 38px !important;
    }
</style>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-5">
            <label class="btn btn-secondary float-left">
                <input type="file" class="d-none" id="fileOrigin" />选择原始文件（只读）
            </label>
            <textarea class="form-control difftxt" id="txtOrigin" placeholder="或 粘贴内容"></textarea>
        </div>
        <div class="col-md-5">
            <label class="btn btn-warning float-left">
                <input type="file" class="d-none" id="fileVary" />选择变动文件（可编辑）
            </label>
            <textarea class="form-control difftxt" id="txtVary" placeholder="或 粘贴内容"></textarea>
        </div>
        <div class="col-md-2">
            <label class="m-0">
                <input type="checkbox" id="chkDiffMode" /> 内联对比
            </label>
            <br />
            <label class="text-muted m-0">可拖拽打开文件</label>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div id="editor" class="border"></div>
        </div>
    </div>
</div>

<script src='https://cdn.jsdelivr.net/npm/monaco-editor@0.23.0/min/vs/loader.js'></script>

<script>
    require.config({
        paths: {
            vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.23.0/min/vs'
        },
        'vs/nls': { availableLanguages: { '*': 'zh-cn' } }
    });
</script>
                        


<script>
    var editor, originContent = '', varyContent = '';

    $('#chkDiffMode').click(changeDiffMode);
    function changeDiffMode() {
        if (editor) {
            editor.updateOptions({
                renderSideBySide: !$('#chkDiffMode').is(':checked')
            });
        }
    }
    function createDiffEditor(text1, text2) {
        $('#editor').empty();
        require(['vs/editor/editor.main'], function () {
            var originalModel = monaco.editor.createModel(text1 || "", "text/plain");
            var modifiedModel = monaco.editor.createModel(text2 || "", "text/plain");
            editor = monaco.editor.createDiffEditor(document.getElementById("editor"), ss.meConfig());
            editor.setModel({
                original: originalModel,
                modified: modifiedModel
            });
            changeDiffMode();
        });
    }
    $('#fileOrigin').change(function () {
        if (this.files.length) {
            var reader = new FileReader();
            reader.onload = function () {
                createDiffEditor(originContent = this.result, varyContent);
            };
            reader.readAsText(this.files[0]);
        }
    });
    $('#txtOrigin').on('input', function () {
        createDiffEditor(originContent = this.value, varyContent);
    });
    $('#fileVary').change(function () {
        if (this.files.length) {
            var reader = new FileReader();
            reader.onload = function () {
                createDiffEditor(originContent, varyContent = this.result);
            };
            reader.readAsText(this.files[0]);
        }
    });
    $('#txtVary').on('input', function () {
        createDiffEditor(originContent, varyContent = this.value);
    });

    function AutoHeight() {
        var ch = $(window).height() - $('#editor').offset().top - 15;
        $('#editor').css('height', Math.max(200, ch));
    }
    $(window).on('load resize', AutoHeight);

    //接收文件
    ss.receiveFiles(function (files) {
        jz.popup({
            title: "请选择文件打开到？",
            okValue: "变动文件（可编辑）",
            cancelValue: "原始文件（只读）",
            drag: true,
            //变动（右）
            ok: function () {
                var file = files[0];
                var reader = new FileReader();
                reader.onload = function (e) {
                    createDiffEditor(originContent, varyContent = e.target.result);
                    $('#txtVary').val(varyContent)
                };
                reader.readAsText(file);
            },
            //原始（左）
            cancel: function () {
                var file = files[0];
                var reader = new FileReader();
                reader.onload = function (e) {
                    createDiffEditor(originContent = e.target.result, varyContent);
                    $('#txtOrigin').val(originContent)
                };
                reader.readAsText(file);
            }
        })
    });
</script>
        </div>
</body>
</html>
